<template >
  <div class="dyn">
    <!-- 关注列表 -->
    <div class="dynamic">
      <div class="focus">
        <div class="listbox">
          <div class="focuslist" v-for="item in focuslist" :key="item.userId">
            <div class="focususerimg">
              <van-image
                round
                width="3rem"
                height="3rem"
                :src="item.avatarUrl"
              />
            </div>
            <p class="focususername">{{ item.nickname }}</p>
          </div>
        </div>
      </div>
      <!-- 获取热门话题 -->
      <div class="topic">
        <div class="topichead">
          <span>热门话题</span>
          <span>这里找到属于你的话题</span>
        </div>
        <div class="hotTopic">
          <div
            v-for="item in dynamiclist"
            :key="item.actId"
            class="hotTopic-1"
            @click="godetail(item.actId)"
          >
            <h5 class="mr2">#{{ item.title }}#</h5>
            <p class="mr2">{{ item.text[0] }}</p>
            <div class="topictit mr2">{{ item.text[1] }}</div>
            <img class="topicimg mr2" :src="item.sharePicUrl" alt="" />
            <div>有{{ item.participateCount }}人参与了该话题</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFocusListAPI, getDynamicAPI } from "../../../api/focus";
export default {
  name: "dynamic",
  data() {
    return {
      focuslist: [],
      dynamiclist: [],
      uid: "",
    };
  },
  props: [],
  components: {},
  computed: {},
  watch: {},
  created() {
    //获取uid
    //this.uid = this.$route.params.uid;
    this.uid = this.$store.state.uid;
    console.log(this.uid);
    this.getfocusList();
    this.getDynamic();
  },
  mounted() {},
  methods: {
    //关注列表
    async getfocusList() {
      const res = await getFocusListAPI(this.uid);
      console.log(res);
      console.log(res.follow);
      this.focuslist = res.follow;
    },
    //动态列表
    async getDynamic() {
      console.log(11);
      const res = await getDynamicAPI();
      console.log(res);
      this.dynamiclist = res.hot;
    },
    //去详情页
    godetail(id) {
      this.$router.push({
        path: `/topic/${id}`,
      });
    },
  },
};
</script>

<style scoped>
.dynamic {
  background-color: #f3f3f3;
  margin: 0 10px;
}
/* 关注 */
.listbox {
  display: flex;
}
.focuslist {
  justify-content: flex-start;
  margin: 10px 10px;
}
.focususername {
  font-size: 12px;
  width: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 热门话题*/
.topichead {
  font-size: 14px;
  margin: 10px 0;
}
.topichead span:nth-child(1) {
  font-weight: bold;
}
.topichead span:nth-child(2) {
  margin-left: 90px;
  color: #c75070;
}
/* 热门话题列表 */
.hotTopic {
  font-size: 12px;
}
.mr2 {
  margin-top: 15px;
}
.hotTopic h5 {
  font-weight: bolder;
  color: #6c8099;
  font-size: 14px;
}
.topictit {
  color: #c20c0c;
}
.focus {
  width: 100%;
  overflow: hidden;
}
.topicimg {
  width: 300px;
  height: 300px;
}
.hotTopic-1 {
  margin-top: 40px;
}
</style>
